<!-- 编辑规格：限购数量和库存 -->

<script setup lang="ts">
import { pick } from "lodash-es";
import { ProInputNumber } from "@/modules/package/form";
import {
  ElButton,
  ElCol,
  ElForm,
  ElFormItem,
  ElRow,
  ElSwitch,
} from "element-plus";

import ApiActivity from "@/api/activity";
import useForm from "@/hooks/useForm";

import { TTicketSkuList } from "@/types/global";

const { source } = defineProps<{
  source: TTicketSkuList;
}>();

const emits = defineEmits<{
  success: [];
}>();

const { refForm, isFetching, model, submit, reset, onFetchResponse } = useForm(
  ApiActivity.skuUpdate,
  {
    defaultModel: pick(source, ["id", "status", "stock_num", "sale_limit"]),
  }
);

onFetchResponse(() => emits("success"));

const rules = {
  stock_num: { required: true, message: "请输入库存量" },
  sale_limit: { required: true, message: "请输入限购数量" },
};
</script>

<template>
  <ElForm
    ref="refForm"
    size="large"
    :model="model"
    :rules="rules"
    label-width="6em"
  >
    <ElFormItem label="规格名称"> {{ source.sku_title }} </ElFormItem>
    <ElFormItem label="限购数量" prop="sale_limit">
      <ProInputNumber
        :min="0"
        :precision="0"
        :max="9999999"
        class="w-full"
        v-model="model.sale_limit"
      />
    </ElFormItem>

    <ElFormItem label="库存(张)" prop="stock_num">
      <ProInputNumber
        :min="0"
        :precision="0"
        :max="9999999"
        class="w-full"
        v-model="model.stock_num"
      />
    </ElFormItem>

    <ElFormItem label="已售">
      {{ source.sold_num }} 张
    </ElFormItem>

    <ElFormItem label="状态" width="60">
      <ElSwitch
        v-model="model.status"
        inline-prompt
        active-text="可用"
        inactive-text="禁用"
        :active-value="1"
        :inactive-value="2"
      />
    </ElFormItem>

    <div class="text-center mt-10">
      <ElButton class="px-8" :disabled="isFetching" @click="reset"
        >重置
      </ElButton>
      <ElButton
        class="px-8"
        type="primary"
        :loading="isFetching"
        @click="submit"
        >保存
      </ElButton>
    </div>
  </ElForm>
</template>
